<template>
  <view class="u-demo">
    <view class="u-demo-wrap">
      <view class="u-demo-title">演示效果</view>
      <view class="u-demo-area">
        <u-button
          @click="btnClick"
          data-name="3333"
          :loading="loading"
          :plain="plain"
          :shape="shape"
          :size="size"
          :ripple="ripple"
          :hairLine="hairLine"
          :type="type"
        >
          山川异域，风月同天
        </u-button>
      </view>
    </view>
    <view class="u-config-wrap">
      <view class="u-config-title u-border-bottom"> 参数配置 </view>
      <view class="u-config-item">
        <view class="u-item-title">主题选择</view>
        <u-subsection :list="['default', 'primary', 'error', 'warning', 'success']" @change="typeChange"></u-subsection>
      </view>
      <view class="u-config-item">
        <view class="u-item-title">尺寸大小</view>
        <u-subsection :list="['默认', '中等', '迷你']" @change="sizeChange"></u-subsection>
      </view>
      <view class="u-config-item">
        <view class="u-item-title">形状</view>
        <u-subsection :list="['直角', '圆角']" @change="shapeChange"></u-subsection>
      </view>
      <view class="u-config-item">
        <view class="u-item-title">镂空</view>
        <u-subsection :current="1" :list="['是', '否']" @change="plainChange"></u-subsection>
      </view>
      <view class="u-config-item">
        <view class="u-item-title">水波纹(感觉哪里有问题？点击顶部的按钮试试)</view>
        <u-subsection :current="1" :list="['是', '否']" @change="rippleChange"></u-subsection>
      </view>
      <view class="u-config-item">
        <view class="u-item-title">细边框</view>
        <u-subsection :list="['是', '否']" @change="hairLineChange"></u-subsection>
      </view>
      <view class="u-config-item">
        <view class="u-item-title">加载中</view>
        <u-subsection :current="1" :list="['是', '否']" @change="loadingChange"></u-subsection>
      </view>
    </view>
  </view>
</template>

<script lang="ts" setup>
import { ref } from 'vue'

// 主题选择
const type = ref<'default' | 'primary' | 'error' | 'warning' | 'success'>('default')
// 尺寸大小
const size = ref<'default' | 'medium' | 'mini'>('default')
// 形状
const shape = ref<'square' | 'circle'>('square')
// 镂空
const plain = ref<boolean>(false)
// 水波纹
const ripple = ref<boolean>(false)
// 细边框
const hairLine = ref<boolean>(true)
// 加载中
const loading = ref<boolean>(false)

// 主题选择切换
const typeChange = (e: number) => {
  switch (e) {
    case 0:
      type.value = 'default'
      break
    case 1:
      type.value = 'primary'
      break
    case 2:
      type.value = 'error'
      break
    case 3:
      type.value = 'warning'
      break
    case 4:
      type.value = 'success'
      break
  }
}

// 尺寸大小切换
const sizeChange = (e: number) => {
  switch (e) {
    case 0:
      size.value = 'default'
      break
    case 1:
      size.value = 'medium'
      break
    case 2:
      size.value = 'mini'
      break
  }
}

// 形状切换
const shapeChange = (e: number) => {
  shape.value = e === 0 ? 'square' : 'circle'
}

// 镂空切换
const plainChange = (e: number) => {
  plain.value = e === 0
}

// 水波纹切换
const rippleChange = (e: number) => {
  ripple.value = e === 0
}

// 细边框切换
const hairLineChange = (e: number) => {
  hairLine.value = e === 0
}

// 加载中切换
const loadingChange = (index: number) => {
  loading.value = index === 0
}

// 按钮点击事件
const btnClick = () => {
  uni.showToast({
    title: '按钮被点击',
    icon: 'none'
  })
}
</script>

<style lang="scss" scoped>
.box {
  padding: 30rpx;
}

.box :deep(button) {
  margin-bottom: 40rpx;
}
</style>
